<template>
    <div>
        <el-form :inline="true">
            <el-form-item v-if="mode === 'project'">
                <project_add_anchor_schedule
                        ref="searchAnchor"
                        :visible.sync="dialog"
                        :project="project"
                        @add="add"/>
                <el-button @click="dialog = true" type="primary">添加直播记录</el-button>
            </el-form-item>
            <el-form-item label="日期">
                <el-date-picker type="daterange"
                                :clearable="false"
                                :editable="false"
                                placeholder="选择显示的记录"
                                v-model="date"
                                @change="fetch()"/>
            </el-form-item>
            <el-form-item label="时间排序">
                <el-radio-group v-model="order" @change="fetch">
                    <el-radio :label="0">顺序</el-radio>
                    <el-radio :label="1">倒序</el-radio>
                </el-radio-group>
            </el-form-item>
        </el-form>

        <!--数据表-->
        <el-table :data="list" stripe>
            <el-table-column label="平台" prop="platform.name" width="120px" v-if="mode ==='project'"/>
            <el-table-column label="主播" prop="anchor.name" width="160px" v-if="mode ==='project'">
                <template slot-scope="scope">
                    <el-button type="text"
                               @click="$router.push(`/anchor/${scope.row.anchor.id}`)">
                        {{scope.row.anchor.name}}
                    </el-button>
                </template>
            </el-table-column>
            <el-table-column label="项目" prop="project.name" v-if="mode ==='anchor'">
                <template slot-scope="scope">
                    <el-button type="text"
                               @click="$router.push(`/project/${scope.row.project.id}`)">
                        {{scope.row.project.name}}
                    </el-button>
                </template>
            </el-table-column>
            <el-table-column label="直播间" prop="anchor.url" width="100px" v-if="mode === 'project'">
                <template slot-scope="scope">
                    <a :href="scope.row.anchor.url" target="_blank">打开</a>
                </template>
            </el-table-column>
            <el-table-column label="直播时间" width="420">
                <template slot-scope="scope">
                    <el-date-picker v-if="canModifyDate(scope.row.start, scope.row.end)"
                                    type="datetimerange"
                                    v-model="scope.row.time"
                                    :editable="false"
                                    @change="edit(scope.row)"/>
                    <div v-else>{{dateFormat(scope.row.start)}} 到 {{dateFormat(scope.row.end)}}</div>
                </template>
            </el-table-column>
            <el-table-column label="二维码">
                <template slot-scope="scope">
                    {{scope.row.qrcode ? '有':''}}
                </template>
            </el-table-column>
            <el-table-column label="截图间隔（分钟）" width="140px">
                <template slot-scope="scope">
                    <el-input-number v-if="canModifyDate(scope.row.start, scope.row.end)"
                                     v-model="scope.row.loop"
                                     :controls="false"
                                     @change="edit(scope.row)" style="width: 100%;"/>
                    <div v-else>{{scope.row.loop}}</div>
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <!--<a class="el-button el-button&#45;&#45;text" @click="$router.push(scope.row.setupUrl)"></a>-->
                    <router-link class="el-button el-button--text" :to="scope.row.setupUrl" target="_blank">
                        详细设置
                    </router-link>
                    <el-button type="text" @click="remove(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!--分页-->
        <div style="text-align: center">
            <el-pagination background
                           layout="prev, pager, next"
                           :page-size="$store.state.pageSize"
                           :current-page.sync="page"
                           @current-change="fetch"
                           :total="total"/>
        </div>
    </div>
</template>

<script>
    import Project_add_anchor_schedule from './project_add_anchor_schedule';
    import moment from 'moment';

    export default {
        name: "schedule_list",
        components: {
            Project_add_anchor_schedule
        },
        props: {
            mode: {required: true},//project,anchor,project_anchor
            project: {
                default() {
                    return []
                },
            },
            anchor: {
                default() {
                    return []
                },
            },
        },
        data() {
            return {
                loading: true,
                date: [moment().subtract(7, 'd').format('YYYY-MM-DD'), moment().format('YYYY-MM-DD')],
                list: [],
                page: 1,
                total: 0,
                selected: [],
                dialog: false,
                order: 1,
            };
        },
        methods: {
            fetch() {
                let url = '/api/schedule';
                switch (this.mode) {
                    case 'project':
                    case 'project_anchor':
                        url += `/project/${this.project.id}`;
                        if (this.mode === 'project_anchor')
                            url += `/anchor/${this.anchor.id}`;
                        break;
                    case 'anchor':
                        url += `/anchor/${this.anchor.id}`;
                        break;
                    default:
                        throw new Error('不符合期望的值');
                }

                this.$http.get(url, {
                    params: {
                        order: this.order,
                        page: this.page,
                        start: this.date[0],
                        end: this.date[1]
                    }
                }).then(res => {
                    this.total = res.data.total;
                    res.data.list.forEach(d => {
                        if (this.canModifyDate(d.start, d.end)) {
                            // console.log('可以修改日期');
                            d.start = new Date(d.start);
                            d.end = new Date(d.end);
                            d.time = [d.start, d.end];
                        }

                        if (this.mode === 'project') {
                            d.setupUrl = `/project/${this.project.id}/anchor/${d.anchor.id}`;
                        } else if (this.mode === 'anchor') {
                            d.setupUrl = `/project/${d.project.id}/anchor/${this.anchor.id}`;
                        } else if (this.mode === 'project_anchor') {
                            d.setupUrl = `/project/${this.project.id}/anchor/${this.anchor.id}`;
                        }
                        d.setupUrl += `/schedule/${d.id}`;
                    });
                    this.list = res.data.list;
                });
            },
            add(data) {
                this.fetch();
                this.$emit('add', data);
            },
            edit(schedule) {
                schedule.start = schedule.time[0];
                schedule.end = schedule.time[1];
                this.$http.post(`/api/schedule/${schedule.id}`, schedule)
                    .then(() => {
                        this.$message.success('成功修改直播记录');
                    })
                    .catch(err => {
                        this.$message.error(err.response.data);
                    });
            },
            remove(schedule) {
                this.$confirm(`连带这个直播记录的截图也会一并删除，此操作无法撤销！`, '警告').then(() => {
                    this.$http.delete(`/api/schedule/${schedule.id}`).then(() => {
                        this.$message.success('删除成功');
                        this.list.splice(this.list.indexOf(schedule), 1);
                    }).catch(err => {
                        this.$message.error(err.response.data);
                    });
                });
            },
            openWithAnchor(anchor) {
                this.$refs['searchAnchor'].openWithAnchor(anchor);
            },
            canModifyDate(start, end) {
                start = moment(start);
                end = moment(end);
                let now = moment();
                return start < now && now < end;
            },
            dateFormat(date) {
                return moment(date).format('YYYY-MM-DD HH:mm');
            }
        },
        watch: {
            project() {
                this.$nextTick(() => {
                    this.fetch();
                });
            },
            anchor() {
                this.$nextTick(() => {
                    this.fetch();
                });
            },
        },
        mounted() {
        }
    }
</script>

<style scoped>

</style>